<template>
  <div>
    <van-steps :steps="steps" :active="active"/>

    <div class="zan-cell zan-field">
      <div class="zan-cell__hd zan-field__title">收货姓名</div>
      <div class="zan-field__input zan-cell__bd">
        <input placeholder="请输入姓名" v-model="order.real_name">
      </div>
    </div>
    <div class="zan-cell zan-field">
      <div class="zan-cell__hd zan-field__title">收货号码</div>
      <div class="zan-field__input zan-cell__bd">
        <input placeholder="请输入收货号码" v-model="order.phone" type="number">
      </div>
    </div>

    <div class="zan-cell zan-field">
      <div class="zan-cell__hd zan-field__title">所在地区</div>
      <div class="zan-field__input zan-cell__bd">
        <picker mode="region" @change="bindRegionChange" :value="area" v-if="!readonly">
          <input placeholder="请选择所在地区" v-model="order.area" type="number" :readonly="true">
        </picker>
      </div>
    </div>
    <div class="zan-cell zan-field">
      <div class="zan-cell__hd zan-field__title">详细地址</div>
      <div class="zan-field__input zan-cell__bd">
        <input placeholder="请输入详细地址" v-model="order.address" type="number" :readonly="readonly">
      </div>
    </div>
    <div class="btn" @click="saveAddress()">保 存</div>
  </div>
</template>

<script>
import api from "@/utils/api";
import { mapState, mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      readonly: false,
      steps: [
        {
          text: "未发货"
          // desc: "未发货"
        },
        {
          text: "已发货"
          // desc: "描述信息"
        },
        {
          text: "已收货"
          // desc: "完成"
        }
      ],
      active: 0,
      area: [],
      default_address: false,
      order_id: 1832,
      order: {}
    };
  },
  computed: {
    ...mapGetters(["user"])
  },
  onLoad(param) {
    if (param && param.id) {
      this.order_id = param.id;
    }
  },
  mounted() {
    let self = this;
    api.getBargainOrder({ id: self.order_id }).then(res => {
      if (res.code == 0) {
        self.order = {};
        self.order = res.data.order;
        console.log("order", self.order);
      }
    });
  },
  methods: {
    handleName(e) {
      this.name = e.mp.detail;
    },
    handleMobile(e) {
      this.mobile = e.mp.detail;
    },
    handleDetailAddress(e) {
      this.detail_address = e.mp.detail;
    },
    bindRegionChange(e) {
      console.log(e.mp.detail.value);
      this.area = e.mp.detail.value;
      this.order.area = this.area[0] + "" + this.area[1] + "" + this.area[2];
    },
    onChange(event) {
      this.default_address = event.mp.detail;
    },
    saveAddress() {
      if (this.order.real_name == "") {
        wx.showToast({ icon: "none", title: "收货人名字不能为空" });
        return;
      }
      if (this.order.phone == "") {
        wx.showToast({ icon: "none", title: "电话号码不能为空" });
        return;
      }
      if (this.area.length == 0) {
        wx.showToast({ icon: "none", title: "请选择所在地区" });
        return;
      }
      if (this.address == "") {
        wx.showToast({ icon: "none", title: "详细地址不能为空" });
        return;
      }
      if (!/^1[34578]\d{9}$/.test(this.mobile)) {
        wx.showToast({ icon: "none", title: "手机号码有误，请重填" });
        return;
      }
      // let form = {
      //   id: this.id,
      //   real_name: this.name,
      //   mobile: this.mobile,
      //   // area: this.area,
      //   aa: this.name11,
      //   address: this.region + this.detail_address
      // };
      this.adderss = this.region + this.detail_address;
      api.setBargainInfo(this.order).then(result => {
        if (result.code == 0) {
          wx.showToast({
            title: "保存成功",
            icon: "none"
          });
          // wx.navigateBack({ delta: 1 });
        }
      });
    }
  },
  async onLoad(options) {
    if(options&&options.id){
      this.order_id=options.id
    }
    // this.id = 0;
    // this.name = "";
    // this.mobile = "";
    // this.area = [];
    // this.detail_address = "";
    // this.region = "";
    // this.default_address = false;

    // if (options.id) {
    //   let result = await api.getAddress({ id: options.id });
    //   if (result.code == 0) {
    //     let address = result.data;
    //     this.id = address.id;
    //     this.name = address.name;
    //     this.mobile = address.mobile;
    //     this.detail_address = address.detail_address;
    //     this.area = address.area;
    //     this.region = this.area[0] + " " + this.area[1] + " " + this.area[2];
    //     if (address.default_address == "Y") {
    //       this.default_address = true;
    //     } else {
    //       this.default_address = false;
    //     }
    //   }
    // }
  }
};
</script>

<style scoped>
.btn {
  height: 40px;
  line-height: 40px;
  width: 95%;
  color: white;
  font-size: 15px;
  text-align: center;
  background: red;
  border-radius: 5px;
  margin: 20px auto;
}
</style>
